import { Component, createRef } from 'react'
import './common.css';
import { bus } from './store';
import * as echarts from 'echarts';
import React from 'react';
import Border from './dataV/border';

export default class LeftTop extends Component<{}>{
 private chart: React.RefObject<HTMLDivElement>
 constructor(prop: {}) {
  super(prop)
  this.chart = createRef<HTMLDivElement>()
 }
 componentDidMount(): void {
  const app = this.chart.current as HTMLElement
  const chart = echarts.init(app);
  bus.on('area', (msg) => {
   render(msg)
  })
  const render = (city: string) => {
   const options = {
    title: {
     text: city + '发往航班',
     textStyle: {
      color: '#ffffff'
     }
    },
    tooltip: {
     trigger: 'item',
     axisPointer: {
      type: 'cross',
      label: {
       backgroundColor: '#6a7985'
      }
     }
    },
    series: [
     {
      data: [{ name: '城市1', value: Math.floor(Math.random() * 50 + 50) }, { name: '城市2', value: Math.floor(Math.random() * 50 + 50) }, { name: '城市3', value: Math.floor(Math.random() * 50 + 50) }, { name: '城市4', value: Math.floor(Math.random() * 50 + 50) }, { name: '城市5', value: Math.floor(Math.random() * 50 + 50) }, { name: '城市6', value: Math.floor(Math.random() * 50 + 50) }, { name: '城市7', value: Math.floor(Math.random() * 50 + 50) }],
      type: 'pie',
      radius: ['50%', '75%']
     }
    ],
    color: ['#168BF2A7', '#01FFFFA7', '#21C6FEA7', '#1672FBA7', '#0B4C86A7', '#0056FBA7', '#60BCEBA7']
   }
   chart.setOption(options)
  }
  window.addEventListener('resize', () => {
   chart.resize()
  })
  this.componentWillUnmount = () => {
   window.removeEventListener('resize', () => {
    console.log('uninstall');
    chart.resize()
   })
  }
 }

 render() {
  return (
   <Border style={{ left: '21vw', top: '12vh', padding: '30px' }} className='chart' >
    <div style={{ width: '100%', height: '100%' }} ref={this.chart}></div>
   </Border>
  )
 }
}
